<template>
    
    <a-layout>
        <!-- <a-layout-header class="header" style="width: 60px;cursor: pointer;z-index: 1;">
            <Group/>
        </a-layout-header> -->
        <a-layout-content>
            <Workspace />
            <Search />
            <Toolbox />
            <Zoombox />
            <Run />
        </a-layout-content>
        <a-layout-sider ref="layoutSider" :resize-directions="['left']" @moving="handleMoving"
            @moving-end="handleMoving">
            <Codespace />
        </a-layout-sider>
        <!-- <SpikeHardware /> -->
    </a-layout>
    <Navigator />
    <Trashcan />
    <Screenshot />
    <Dialog />
</template>

<script setup>
import '../assets/categories'
import '../blocks/boxy'
import '../blocks/patch'
import '../theme/codemao.theme'
import '../theme/codemao.renderer'
import '../generators/javascript'

import Blockly from 'blockly'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

import { useStore } from '../store/store'
import Codespace from './Codespace.vue'
import Dialog from './Dialog.vue'
import Group from './Group.vue'
import Navigator from './Navigator.vue'
import Run from './Run.vue'
import Screenshot from './Screenshot.vue'
import Search from './Search.vue'
import Toolbox from './Toolbox.vue'
import Trashcan from './Trashcan.vue'
import Workspace from './Workspace.vue'
import Zoombox from './Zoombox.vue'



let usedLayoutSider = void 0
const layoutSider = ref()
const store = useStore()
const route = useRoute()
store.token = route.query.token
store.uuid = route.query.id

// if (store.token === undefined) {

//     window.location.href = "https://www.cxyth.com/login";
// }
function handleMoving() {
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            Blockly.svgResize(store.workspaceSvg)
        }, 100 * i)
    }
}

function setLayoutSider(isOpen = false) {
    layoutSider.value.$el.style.display = isOpen ? 'block' : 'none'
    handleMoving()
}

onMounted(() => {
    // store.workspaceSvg.getToolbox().setVisible(false);
    console.log('工具箱:', store.workspaceSvg.getToolbox());
    localStorage.setItem('token', route.query.token);
    watch(
        store.$state,
        (state) => {
            if (state.hasLayoutSider !== usedLayoutSider) {
                setLayoutSider(state.hasLayoutSider)
                usedLayoutSider = state.hasLayoutSider
            }
        },
        { deep: true }
    )
    handleMoving()
    setLayoutSider(true)
});





</script>

<style>
html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background: var(--color-bg-1);
    border: 0;
}

::selection {
    background: #1ba2e333;
}

body::-webkit-scrollbar {
    display: none;
}

.header{
    display: flex;
    justify-content: center;
    align-items: stretch;
}
</style>
